<template>
  <div class="main">
    <!-- 好友模块路由 -->
    <h1>Friend Part</h1>
    <!-- 子路由切换，选择显示我关注的人还是我的粉丝，默认显示我关注的人 -->
    <ul class="choiceList">
      <li @click="toUserAttention">{{toUserAttentionText}}</li>
      <li @click="toUserFans">{{toUserFansText}}</li>
    </ul>
    <!-- 显示区 -->
    <router-view name="friendList"></router-view>
  </div>
</template>

<script>
import {getCookie} from '@/tool/ToolCookie'
export default {
  computed:{
    toUserAttentionText(){
      return getCookie("userId")==this.$route.query.id ? "我的关注":"他的关注"
    },
    toUserFansText(){
      return getCookie("userId")==this.$route.query.id ? "我的粉丝" : "他的粉丝"
    }
  },
  methods: {
    toUserAttention() {
      // 点击切换子路由，显示我关注的人
      this.$router.push({
        path: "/main/friend/attention",
        query: { id: this.$route.query.id },
      });
    },
    toUserFans() {
      // 点击切换子路由，显示我的粉丝
      this.$router.push({
        path: "/main/friend/fans",
        query: { id: this.$route.query.id },
      });
    },
  },
};
</script>

<style scoped>
.main {
  height: auto;
  min-height: 700px;
  padding-bottom: 30px;
}

h1 {
  color: #fff;
  margin: 10px 0 0 0;
  padding-left: 10px;
  border-bottom: solid #55556d 0.5px;
}
.choiceList {
  height: 50px;
  border-bottom: 0.5px solid #55556d;
  padding-left: 20px;
}
.choiceList li {
  color: #fff;
  display: inline-block;
  text-decoration: none;
  line-height: 50px;
  padding: 0 10px;
  cursor: pointer;
}
</style>